<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sub(){
            alert('提交成功')
        }
    </script>
</head>
<body>
    <h1>用户注册</h1>
    <div id="basic_info" style="border:rgb(97, 83, 83) solid 2px; line-height: 2; width: 300px; box-shadow: rgb(221, 196, 196) 1.4px 1.5px 1px;">
        <div style="position: absolute; left: 20px; top: 68px; font-size: 18px; background-color: white;">基本信息（必填）</div>
        <div style="margin-top: 12px; padding-bottom: 7px;">
            <span style="margin-left: 5px">账号：</span>
            <input type="text" name="account" placeholder="6-15位字符"><br>
            <span style="margin-left: 5px">邮箱：</span>
            <input type="text" name="email" placeholder="example@163.com"><br>
            <span style="margin-left: 5px">密码：</span>
            <input type="password" name="pw" placeholder="不少于6位，使用字母+数字"><br>
            <span style="margin-left: 5px">确认密码：</span>
            <input type="password" name="confirm_pw" placeholder="请确认密码">
        </div>
    </div>
    <div id="ex_info" style="border:rgb(97, 83, 83) solid 2px; line-height: 2; width: 300px; box-shadow: rgb(221, 196, 196) 1.4px 1.5px 1px; margin-top: 30px;">
        <div style="position: absolute; left: 20px; top: 248px; font-size: 18px; background-color: white;">拓展信息（选填）</div>
        <div style="margin-top: 12px; padding-bottom: 7px;">
            <span style="margin-left: 5px">生日：</span>
            <input type="date" name="birth"><br>

            <span style="margin-left: 5px">性别:</span>
            <input type="radio" name="the_select_one" value="nan">男
            <input type="radio" name="the_select_one" value="nv">女
            <input type="radio" name="the_select_one" value="dn" checked>保密<br>

            <span style="margin-left: 5px">爱好：</span>
            <input type="checkbox" name="coding">编程
            <input type="checkbox" name="hang_out">闲逛
            <input type="checkbox" name="game" checked>打游戏<br>

            <span style="margin-left: 5px">联系方式</span>
            <input type="text" name="p_num" placeholder="请输入您的手机号码">
        </div>
    </div>
    <div id="other_info" style="border:rgb(97, 83, 83) solid 2px; line-height: 2; width: 350px; box-shadow: rgb(221, 196, 196) 1.4px 1.5px 1px; margin-top: 30px;">
        <div style="position: absolute; left: 20px; top: 428px; font-size: 18px; background-color: white;">其他信息（选填）</div>
        <div style="margin-top: 12px; padding-bottom: 7px;">
            <span style="margin-left: 5px; padding-top: 7px;">上传头像：</span>
            <input type="file" name="avatar"><br>

            <span style="margin-left: 5px">简历：</span><br>
            <textarea name="introduce" cols="30" rows="10" style="margin-left: 5px; width: 300px; height: 130px;" placeholder="不超过100字"></textarea>
        </div>
    </div>
    <div id="buttons" style="margin-top:15px">
        <input type="button" onclick="sub()" name="done" value="提交">
        <input type="reset" name="clear" value="重置">
    </div>
</body>
</html>